<template>
	<view class="content">
		<view class="action-row">
			欢迎登录防雷检测平台
		</view>
		<view class="input-group">
			<view class="input-row border">
				<text class="title">手机号：</text>
				<view class="m-input-view">
					<input v-model="account" type="number" class="m-input-input" placeholder="请输入手机号" @focus="focuschange" @blur="blurchange" />
				</view>
			</view>
			<view class="input-row">
				<text class="title">密	码：</text>
				<view class="m-input-view">
					<input v-model="password" type="password" :password="true" class="m-input-input" placeholder="请输入密码" @focus="focuschange"
					 @blur="blurchange" />
				</view>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">登录</button>
		</view>
		<view class="action-row">
			<!-- <navigator url="../reg/reg">注册账号</navigator>
            <text>|</text> -->
			<!--   <navigator url="../pwd/pwd">忘记密码？</navigator> -->
		</view>
		<!-- <view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
            <view class="oauth-image" v-for="provider in providerList" :key="provider.value">
                <image :src="provider.image" @tap="oauth(provider.value)"></image>
            </view>
        </view> -->
		<view class="versionCode">版本号：{{version}}</view>
	</view>
</template>

<script>
	import api from '../../api.js';

	// import mInput from '../../components/m-input.vue'
	export default {
		components: {
			// mInput
		},
		data() {
			return {
				version: '',
				providerList: [],
				hasProvider: false,
				account: uni.getStorageSync('u'),
				password: '',
				positionTop: 0,
				networkType:'',
				focusValue: false,
				blurValue: false,
				timer: null
			}
		},
		onShow: function() {
			uni.getNetworkType({
					success: (res) => {
				  this.networkType = res.subtype || res.networkType
				},
				fail: () => {
				    uni.showModal({
				    	content:'网络获取失败！',
				        showCancel:false
				    })
				}
			});
		},
		methods: {

			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				// this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			blurchange() {
				this.focusValue = false;
				this.blurValue = true;
				this.pageScrollTop();
			},
			focuschange() {
				this.focusValue = true;
				this.blurValue = false;
				this.pageScrollTop();
			},
			pageScrollTop() {
				let _this = this;
				clearTimeout(this.timer);
				this.timer = setTimeout(function() {
					if (!_this.focusValue && _this.blurValue) {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					} else {
						return;
					}
				}, 300)
			},
			bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				// #ifdef APP-PLUS
				var imei = plus.device.imei;
				if (plus.os.name === 'iOS') {
					imei = plus.device.uuid;
				}
				//#endif
				if (this.account.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				/**
				 * 下面简单模拟下服务端的处理
				 * 检测用户账号密码是否在已注册的用户列表中
				 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
				 */
				const data = {
					code: this.account,
					password: this.password,
					// #ifdef APP-PLUS
					imei: imei,
					clientid: plus.push.getClientInfo().clientid,
					//#endif
				};
				uni.showLoading({
					mask: true,
					title: '登录中'
				});
				if(this.networkType=='none'){
					uni.hideLoading();//加载完毕
					uni.showModal({
						content: '网络异常 无法访问服务器',
						confirmText: "取消",
						cancelText: "确定"
					})
					  return; 
				}
				api.post({
					url: 'api/login.do',
					data: data,
					success(res) {
						//console.log(JSON.stringify(res))
						uni.hideLoading();
						if (res.code==0) {
							uni.showToast({
								icon: 'none',
								title: '登录成功！'
							});
							uni.setStorageSync('user', res.data)
							uni.setStorageSync('token', res.data.id)
							uni.reLaunch({
								url: '../index/index'
							});
						} else {
							if (res.msg) {
								uni.showToast({
									icon: 'none',
									title: res.msg
								});
							} else {
								uni.showToast({
									icon: 'none',
									title: '服务器内部错误'
								});
							}
						}
					},
					
					fail(res) {console.log(JSON.stringify(res))
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '服务器内部错误'
						});
					}
				})
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.version = plus.runtime.version;
			//#endif
			// this.initPosition();
		},
		onReady() {
			this.initPosition();
		}
	}
</script>

<style>
	.versionCode {
		text-align: center;
		font-size: 24upx;
		color: #cccccc;
	}

	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 50upx;
	}

	.action-row .action-row-img {
		height: 200upx;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 20upx;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		width: 100upx;
		height: 100upx;
		border: 1upx solid #dddddd;
		border-radius: 100upx;
		margin: 0 40upx;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 60upx;
		height: 60upx;
		margin: 20upx;
	}

	.m-input-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		flex: 1;
		padding: 0 20upx;
	}

	.m-input-input {
		flex: 1;
		width: 100%;
	}
</style>
